<template>
    <el-dialog v-model="props.modelValue" style="width: 1500px;" @close="hideModal(false)" append-to-body>
        <template #header>
            <div class="text-center font-bold text-[18px]">
                {{ "商品导入" }}
            </div>
        </template>

        <el-table ref="dataTable" :data="data" border height="500" header-cell-class-name="text-black">
            <el-table-column label="序号" width="60">
                <template #default="{ $index }">
                    <p class="text-center">{{ $index + 1 }}</p>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="enterDate" label="进货日期" width="120">
                <template #default="scope">
                    <p v-if="scope.row.enterDate" class="text-center">
                        {{ dayjs(scope.row.enterDate).format("YYYY-MM-DD") }}
                    </p>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="pIp" label="IP" width="180" />
            <el-table-column align="center" prop="name" label="商品名称" />
            <el-table-column align="center" prop="categoryDesc" label="类型" width="150" />
            <el-table-column align="center" sortable prop="stock" label="库存" width="80" />
            <el-table-column align="center" prop="sourceDesc" label="货源" width="100" />
            <el-table-column align="center" prop="statusDesc" label="状态" width="100">
                <template #default="scope">
                    <p v-if="scope.row.statusDesc === (props.status?.[1] as any)?.key"
                        class="status-tag bg-[#f64f59] text-white rounded-md py-[5px]">
                        {{ scope.row.statusDesc }}
                    </p>
                    <p v-else-if="scope.row.statusDesc === (props.status?.[2] as any)?.key"
                        class="status-tag bg-[#c471ed] text-white rounded-md py-[5px]">
                        {{ scope.row.statusDesc }}
                    </p>
                    <p v-else-if="scope.row.statusDesc === (props.status?.[3] as any)?.key"
                        class="status-tag bg-[#12c2e9] text-white rounded-md py-[5px]">
                        {{ scope.row.statusDesc }}
                    </p>
                    <p v-else>{{ scope.row.statusDesc }}</p>
                </template>
            </el-table-column>
            <el-table-column align="center" sortable prop="buyPrice" label="进价￥" width="100" />
            <el-table-column align="center" sortable prop="sellPrice" label="售价￥" width="100" />

            <!-- <el-table-column align="center" sortable prop="guidePrice" label="指导价￥" width="110" />
            <el-table-column align="center" sortable prop="breakPrice" label="折扣价￥" width="110" /> -->

            <el-table-column fixed="right" align="center" label="操作" width="70">
                <template #default="{ row, column, $index }">
                    <el-button class="my-[4px]" type="danger" circle @click="deleteProduct(row)">
                        <el-icon><i-ep-Delete /></el-icon>
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <template #footer>
            <div class="dialog-footer">
                <el-button size="large" type="success" @click="submitData">导入</el-button>
                <el-button size="large" type="primary" @click="hideModal(false)">关闭</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script lang='ts' setup>
import { dayjs } from "element-plus";
import { Product } from "@/components/product/type"
import { KeyValueObj } from "@/common/GlobalType";
type Props = {
    modelValue: boolean;
    data: Product[];
    status: KeyValueObj[]
    refresh: Function;
};

const props = withDefaults(defineProps<Props>(), {
    modelValue: () => false,
    data: () => []
});

const emit = defineEmits([
    "update:modelValue",
    "update:data",
]);

const data = ref()

const initData = () => {
    data.value = props.data
}

const hideModal = (refresh: boolean = false) => {
    emit("update:modelValue", false);
    emit("update:data", []);
    refresh && props.refresh()
}

const deleteProduct = (row: Product) => {
    data.value = data.value.filter((item: Product) => item.name != row.name)
}

const submitData = async () => {
    const errResult: Product[] = []
    while (data.value.length) {
        const current = data.value.shift()
        const [err, res] = await ProductService.addProduct(current);
        if (err) {
            errResult.push(current)
        }
    }
    if (errResult.length) {
        await Utils.Modal().confirm('添加完成，存在添加失败的商品！请检查数据重新提交或手动添加~')
        data.value = errResult
    } else {
        Utils.Modal().msgSuccess("添加成功~");
        hideModal(true);
    }
}

initData()
</script>

<style lang='scss' scoped></style>